<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/font/iconfont.css">
    <link rel="stylesheet" href="../../assets/css/base.css">
    <style>
        .btn{
            display: inline-block;
            padding: 10px 20px;
            color: white;
            background-color: brown;
            border-radius: 6px;
            box-shadow: 0 0 2px #741d1d;
            cursor: pointer;
            user-select: none;
            margin: 4px;
        }
        .btn:active{
            background-color: #812121;
        }
    </style>
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        1.基础分发：组件开发时提供 slot 占位标签，完成将来页面的定义域区描述
                   组件分发使用 内置组件标签 slot 进行组件定义占位，接收组件使用时的标签内部内容作为最终渲染内容
                   slot 标签的内部也可以继续定义标签或内容，这部分内容在组件被调用时未提供内部内容时作为插槽默认值进行渲染
        </pre>
        <input type="button" value="添加">
        <input type="button" value="修改">
        <input type="button" value="删除">
        <input type="button" value="查询">
        <br>
        <button>
            <i class="iconfont icon-add"></i>
            添加
        </button>
        <button>
            <i class="iconfont icon-edit"></i>
            修改
        </button>
        <button>
            <i class="iconfont icon-huishouzhan"></i>
            删除
        </button>
        <button>
            <i class="iconfont icon-eye"></i>
            查询
        </button>
        <hr>
        <my-btn value="添加"></my-btn>
        <my-btn value="修改"></my-btn>
        <my-btn value="删除"></my-btn>
        <my-btn value="查询"></my-btn>
        <br>
        <my-btn2>
            <i class="iconfont icon-add"></i>
            添加
        </my-btn2>
        <my-btn2>
            <i class="iconfont icon-edit"></i>
            修改
        </my-btn2>
        <my-btn2>
            <i class="iconfont icon-huishouzhan"></i>
            删除
        </my-btn2>
        <my-btn2>
            <i class="iconfont icon-eye"></i>
            查询
        </my-btn2>
        <my-btn2></my-btn2>
    </div>

    <script type="text/x-template" id="my-btn">
        <div class="btn">{{ value }}</div>
    </script>

    <script type="text/x-template" id="my-btn2">
        <div class="btn">
            <slot>
                <i class="iconfont icon-info"></i>
                默认值
            </slot>
        </div>
    </script>

    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";

        const MyBtn = {
            template:"#my-btn",
            props:["value"]
        }
        const MyBtn2 = {
            template:"#my-btn2"
        }

        createApp({
            components: {
                MyBtn,MyBtn2
            },
            data(){
                return {
                   
                }
            }
        }).mount("#app");
    </script>
</body>
</html>